<template>
  <div>
    <div class="outdiv biaoti">优惠券管理</div>
    <hr style="height:1px;border: none;border-top:1px solid #ddd;margin:15px 0;">

<div class="outdiv">
    <el-button @click="add" icon="el-icon-plus" type="primary" circle plain></el-button>
    <el-button @click="backAllTable" :disabled="chaxunstate === false" type="warning" circle plain icon="el-icon-back"></el-button>
    <el-button @click="selectYouHuiQuan" icon="el-icon-search" type="danger" circle plain></el-button>
    <!-- =============================================================================查询下拉 -->
    <!--  发布方式-->
    <el-select v-model="formSelect.fabuvalue" placeholder="选择方式" style="wdith: 50px" class="xiaoxiao zuoyoubianju">
      <el-option v-for="item in fabuoptions" :key="item.disbursement_id" :label="item.disbursement_name"
        :value="item.disbursement_id">
      </el-option>
    </el-select>
    <!--  使用范围 -->
    <el-select v-model="formSelect.fanweivalue" placeholder="使用范围" style="wdith: 10px" class="xiaoxiao">
      <el-option v-for="item in fanweioptions" :key="item.usearea_id" :label="item.usearea_name"
        :value="item.usearea_id">
      </el-option>
    </el-select>
    <!-- 开始时间 -->
    <el-date-picker v-model="formSelect.startTime" align="right" type="datetime" class="xiao zuoyoubianju" placeholder="通过开始时间"
      value-format="yyyy-MM-dd HH:mm:ss">
    </el-date-picker>
    <!-- 结束时间 -->
    <el-date-picker v-model="formSelect.endTime" align="right" type="datetime" placeholder="通过结束时间" class="xiao"
      value-format="yyyy-MM-dd HH:mm:ss">
    </el-date-picker>
    <!--  =====================================================================优惠券表渲染 -->
    <el-table class="xiajuli shangjuli" :data="elTableData">
      <el-table-column prop="coupon_id" label="编号" align="center">
      </el-table-column>
      <el-table-column prop="coupon_name" label="名称" min-width="100" align="center">
      </el-table-column>
      <el-table-column prop="disbursement_name" label="发放方式" min-width="120" align="center"></el-table-column>
      <el-table-column prop="usearea_name" label="使用范围" align="center">
      </el-table-column>
      <el-table-column prop="start_time" label="开始时间" min-width="150" align="center">
      </el-table-column>
      <el-table-column prop="end_time" label="结束时间" min-width="150" align="center">
      </el-table-column>
      <el-table-column prop="price" label="面值" align="center">
      </el-table-column>
      <el-table-column label="操作" min-width="180" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="small" plain @click="fasongcouId(scope.row)" circle icon="el-icon-s-promotion"></el-button>
          <el-button type="danger" size="small" plain @click="getUpdate(scope.row)" icon="el-icon-edit" circle></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- =================================================================分页页码 -->
    <el-pagination align="center" layout="prev, pager, next" background :total="tableData.length" :page-size="4"
      @current-change="elChangeData" :current-page="elPage">
    </el-pagination>
</div>
    <!-- ==================================================================修改弹框-->
    <el-dialog title="修改优惠券" :visible.sync="dialogFormVisible">
      <el-form :model="formUpdate">
        <el-form-item label="优惠券名称" :label-width="formLabelWidth">
          <el-input v-model="formUpdate.couponName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="发布方式" :label-width="formLabelWidth">
          <el-select v-model="formUpdate.disbursementId" style="wdith: 50px">
            <el-option v-for="item in fabuoptions" :key="item.disbursement_id" :label="item.disbursement_name"
              :value="item.disbursement_id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="使用范围" :label-width="formLabelWidth">
          <el-select v-model="formUpdate.useareaId" style="wdith: 50px">
            <el-option v-for="item in fanweioptions" :key="item.usearea_id" :label="item.usearea_name"
              :value="item.usearea_id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开始时间" :label-width="formLabelWidth">
          <el-col :span="11">
            <el-date-picker v-model="formUpdate.startTime" type="datetime" placeholder="选择日期时间" align="center"
              :picker-options="pickerOptions" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="结束时间" :label-width="formLabelWidth">
          <el-col :span="11">
            <el-date-picker v-model="formUpdate.endTime" type="datetime" placeholder="选择日期时间" align="center"
              default-time="12:00:00" value-format="yyyy-MM-dd HH:mm:ss" :picker-options="pickerOptions">
            </el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="面值" :label-width="formLabelWidth">
          <el-input v-model="formUpdate.price" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="quXiaoXiuGai">取 消</el-button>
        <el-button type="primary" @click="update">确 定</el-button>
      </div>
    </el-dialog>
    <!-- ==================================================================修改弹框完-->
    <!-- ==================================================================增加弹框-->
    <el-dialog title="添加优惠券" :visible.sync="dialogFormVisible2">
      <el-form :model="formAdd">
        <el-form-item label="优惠券名称" :label-width="formLabelWidth">
          <el-input v-model="formAdd.couponName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="发布方式" :label-width="formLabelWidth">
          <el-select v-model="formAdd.disbursementId" style="wdith: 50px">
            <el-option v-for="item in fabuoptions" :key="item.disbursement_id" :label="item.disbursement_name"
              :value="item.disbursement_id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="使用范围" :label-width="formLabelWidth">
          <el-select v-model="formAdd.useareaId" style="wdith: 50px">
            <el-option v-for="item in fanweioptions" :key="item.usearea_id" :label="item.usearea_name"
              :value="item.usearea_id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开始时间" :label-width="formLabelWidth">
          <el-col :span="11">
            <el-date-picker v-model="formAdd.startTime" type="datetime" placeholder="选择日期时间" align="center"
              :picker-options="pickerOptions" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="结束时间" :label-width="formLabelWidth">
          <el-col :span="11">
            <el-date-picker v-model="formAdd.endTime" type="datetime" placeholder="选择日期时间" align="center"
              default-time="12:00:00" value-format="yyyy-MM-dd HH:mm:ss" :picker-options="pickerOptions">
            </el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="面值" :label-width="formLabelWidth">
          <el-input v-model="formAdd.price" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addQuXiao">取 消</el-button>
        <el-button type="primary" @click="queDingAdd">确 定</el-button>
      </div>
    </el-dialog>
    <!-- ==================================================================增加弹框完-->
    <!-- ==================================================================发送弹框-->
    <el-dialog title="根据号码发送优惠券到该用户" :visible.sync="dialogFormVisible1">
      <el-form :model="formFaSong">
        <el-form-item label="电话" :label-width="formLabelWidth1">
          <el-input v-model="formFaSong.userPhone" autocomplete="off" style="width: 20rem"></el-input>
          <el-button @click="jiance">检测号码</el-button>
          <span v-if="formFaSong.jiancetext.length > 11" class="redg">{{
            formFaSong.jiancetext
          }}</span>
          <span v-else class="greeng">{{ formFaSong.jiancetext }}</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="quXiaoFaSong">取 消</el-button>
        <el-button type="primary" @click="fasongData">确 定</el-button>
      </div>
    </el-dialog>
    <!-- ==================================================================发送弹框完-->
  </div>
</template>
<script>
  import * as api from "../../utils/api";
  export default {
    name: "youHuiQuan",
    data() {
      return {
        faSongState: 0,
        redORgreen: false,
        tableData: [], //优惠券表
        elPage: 1, //页码
        //查询条件========================================================================================<
        formSelect: {
          fabuvalue: "",
          fanweivalue: "",
          startTime: "",
          endTime: "",
        }, //查询条件对象
        fabuoptions: [
          //发布方式渲染下拉框的数据
          // {
          //   disbursement_id: 2,
          //   label: "手动添加用户",
          // },
          // {
          //   disbursement_id: 1,
          //   label: "全局发送",
          // },
        ],
        fanweioptions: [],
        //使用范围渲染下拉框的数据

        //查询条件完=======================================================================================>
        dialogTableVisible: false,
        dialogFormVisible: false,

        dialogTableVisible1: false,
        dialogFormVisible1: false,

        dialogTableVisible2: false,
        dialogFormVisible2: false,

        formUpdate: {
          //修改弹框的数据
          couponId: "",
          couponName: "",
          disbursementId: "",
          useareaId: "",
          startTime: "",
          endTime: "",
          price: "",
        },
        formLabelWidth: "120px",
        formFaSong: {
          //发送的数据
          coupon_id: "",
          whytext: "",
          userPhone: "",
          jiancetext: "",
        },
        formAdd: {
          couponName: "",
          disbursementId: "",
          useareaId: "",
          startTime: "",
          endTime: "",
          price: "",
        },
        formLabelWidth1: "120px",
        //时间快捷============================================================================================
        pickerOptions: {
          shortcuts: [{
              text: "今天",
              onClick(picker) {
                picker.$emit("pick", new Date());
              },
            },
            {
              text: "昨天",
              onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() - 3600 * 1000 * 24);
                picker.$emit("pick", date);
              },
            },
            {
              text: "一周前",
              onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit("pick", date);
              },
            },
          ],
        },
        value1: "",
        value2: "",
        value3: "",
        chaxunstate: false,
        //时间快捷完============================================================================================
      };
    },
    computed: {
      //分页=====================================================>
      pageNum() {
        return Math.ceil(this.tableData.length / 4);
      },
      elTableData() {
        let start = (this.elPage - 1) * 4;
        let end = (this.elPage - 1) * 4 + 4;
        return this.tableData.slice(start, end);
      },
      //分页完=====================================================>
    },
    created() {
      this.getDiscount(); //加载完页面就获取全部优惠券
      this.getfanweiData();
      this.getFabuoptions();
    },
    methods: {
      //获取不同页=================================================
      elChangeData(val) {
        this.elPage = val;
      },

      //请求所有优惠券信息===================================
      getDiscount() {
        this.axios({
          url: api.GET_SELECT_ALL_COUPON,
          method: "get",
          params: {},
        }).then((data) => {
          this.tableData = data.data.data;
          // console.log(data.data.data);
        });
      },
      //请求查询条件的下拉渲染发的数据===================================\
      getfanweiData() {
        //这里要请求查询条件的使用范围的下拉数据,具体调用在钩子函数里
        this.axios({
          url: api.GET_SELECT_ADD_USEAREA_XIALA,
          method: "get",
          params: {},
        }).then((data) => {
          // console.log(data);
          this.fanweioptions = data.data.data;
        });
      },
      //查询请求=========================================================
      //选择方式下拉
      getFabuoptions() {
        this.axios({
          url: api.GET_SELECT_FABU_FANGSHI,
          methods: "get",
          params: {},
        }).then((data) => {
          this.fabuoptions = data.data.data;
        });
      },
      //选择方式下拉

      selectYouHuiQuan() {
        this.chaxunstate = true;
        let selectData = {
          disbursement_id: this.formSelect.fabuvalue,
          usearea_id: this.formSelect.fanweivalue,
          start_time: this.formSelect.startTime,
          end_time: this.formSelect.endTime,
        };
        if (
          selectData.disbursement_id == "" &&
          selectData.usearea_id == "" &&
          selectData.start_time == "" &&
          selectData.end_time == ""
        ) {
          this.$message("请选择查询条件");
        } else {
          this.axios({
            url: api.GET_SELECT_TIAOJIAN_COUPON,
            method: "get",
            params: selectData,
          }).then((data) => {
            this.elPage = 1
            this.tableData = data.data.data;
          });
        }
      },
      backAllTable() {
        this.getDiscount();
        this.formSelect = {
          fabuvalue: "",
          fanweivalue: "",
          startTime: "",
          endTime: "",
        };
        this.chaxunstate = false;
      },
      //修改请求=====================================================
      getUpdate(row) {
        //获取当前行
        this.dialogFormVisible = true;
        this.formUpdate.couponId = row.coupon_id;
        this.formUpdate.couponName = row.coupon_name;
        this.formUpdate.disbursementId = row.disbursement_id;
        this.formUpdate.useareaId = row.usearea_id;
        this.formUpdate.startTime = row.start_time;
        this.formUpdate.endTime = row.end_time;
        this.formUpdate.price = row.price;
      },
      update() {
        //这里要请求修改,上传this.formUpdate的内容给后台
        this.dialogFormVisible = false;
        this.axios({
            url: api.POST_UPDATE_YOUHUIQUAN,
            method: "post",
            data: this.formUpdate,
          })
          .then((data) => {
            this.getDiscount();
            this.$message.success(data.data.msg);
          })
          .catch((err) => {
            this.$message(err.data.msg);
          });
      },
      quXiaoXiuGai() {
        this.dialogFormVisible = false;
      },
      // 修改请求完=====================================================>
      //发送请求 =======================================================
      fasongcouId(row) {
        this.dialogFormVisible1 = true;
        this.formFaSong.coupon_id = row.coupon_id;
        this.faSongState = 0;
      },
      fasongData() {
        this.formFaSong.jiancetext = "";
        let fasongData = {
          coupon_id: this.formFaSong.coupon_id,
          user_phone: this.formFaSong.userPhone,
        };
        if (this.formFaSong.userPhone == "") {
          this.formFaSong.jiancetext = "未输入号码";
        } else {
          if (this.faSongState == 1) {
            this.axios({
              url: api.POST_SEND_COUPON,
              method: "post",
              data: fasongData,
            }).then((data) => {
              if (data.data.code == 200) {
                this.dialogFormVisible1 = false;
                this.$message(data.data.msg);
              }
            });
          } else {
            this.$message.error("电话号不存在,无法发送");
          }
        }
      },
      jiance() {
        this.faSongState = 0;
        if (this.formFaSong.userPhone == "") {
          this.formFaSong.jiancetext = "没有填写";
        } else {
          this.axios({
            url: api.GET_SELECT_USERPHONE,
            method: "post",
            params: {
              user_phone: this.formFaSong.userPhone
            },
          }).then((data) => {
            if (data.data.code == 200) {
              this.formFaSong.jiancetext = data.data.msg + ",可以发送";
              this.redORgreen = true;
              this.faSongState = 1;
            } else {
              this.formFaSong.jiancetext = data.data.msg + ",不可发送";
            }
          });
        }
      },
      quXiaoFaSong() {
        this.dialogFormVisible1 = false;
        this.formFaSong.jiancetext = "";
        this.formFaSong.userPhone = "";
      },
      // 添加优惠券==============================================添加优惠券
      //跳转到添加优惠券信息页面
      add() {
        this.dialogFormVisible2 = true;
      },
      queDingAdd() {
        if (
          this.formAdd.couponName == "" ||
          this.formAdd.disbursementId == "" ||
          this.formAdd.useareaId == "" ||
          this.formAdd.startTime == "" ||
          this.formAdd.endTime == "" ||
          this.formAdd.price == ""
        ) {
          this.$message.error("信息未填完整");
        } else {
          this.dialogFormVisible2 = false;
          this.axios({
            url: api.POST_ADD_YOUHUIQUAN,
            method: "post",
            data: this.formAdd,
          }).then((data) => {
            // console.log(data);
            this.$message(data.data.msg);
            this.getDiscount();
          });
        }
      },
      addQuXiao() {
        this.dialogFormVisible2 = false;
      },
    },
    watch: {
      dialogFormVisible2() {
        if (!this.dialogFormVisible2) {
          this.formAdd = {
            couponName: "",
            disbursementId: "",
            useareaId: "",
            startTime: "",
            endTime: "",
            price: "",
          };
        }
      },
      dialogFormVisible1() {
        if (!this.dialogFormVisible1) {
          this.formFaSong = {
            //发送的数据
            coupon_id: "",
            whytext: "",
            userPhone: "",
            jiancetext: "",
          };
        }
      },
    },
  };
</script>

<style lang='less' scoped>
  /* #youhuiquandiv {
  width: 95%;
  margin:  auto;
  padding: 20px;
  /* background-color: rgb(84, 91, 109); */
  /* } */
  .xiao {
    width: 15rem;
    // border: 1px solid skyblue;
    border-radius: 5px;
  }

  .xiaoxiao {
    width: 120px;
    // border: 1px solid skyblue;
    border-radius: 5px;
  }

  .redg {
    color: red;
  }

  .greeng {
    color: green;
  }

  /deep/input::-webkit-input-placeholder {
    color: grey;
  }
</style>